<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>owner page</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style scoped>
        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed deepskyblue;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: deepskyblue;
        }

        .avatar-uploader .el-upload:hover {
            border-color: deepskyblue;
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    </style>

</head>
<body>
<div id="app">
    <el-table :data="owners" style="width: 95%">
        <el-table-column prop="id" label="编号" ></el-table-column>
        <el-table-column prop="username" label="业主名称"></el-table-column>
        <el-table-column prop="tel" label="电话" ></el-table-column>
        <el-table-column prop="sex" label="性别">
            <!--  自定义展示模板  插槽 -->
            <template #default="scope">
                <el-tag
                        :type="scope.row.sex == '1' ? 'primary' : 'success'"
                >{{ scope.row.sex == '1' ? "男":"妹子" }}</el-tag
                >
            </template>
        </el-table-column>

        <el-table-column prop="img" label="头像">
            <!--  自定义展示模板  插槽 展示头像 -->
            <template #default="scope">
                <el-image style="height: 100px" :src="scope.row.img" :fit="fit" />
            </template>
        </el-table-column>

        <el-table-column prop="remarks" label="备注"></el-table-column>

        <el-table-column label="操作">
            <!--  模板 (这个地方 是一个占位置 可以自定义 ) scope当前行的对象数据 -->
            <template #default="scope">
                <!-- 按钮 1  编辑-->
                <el-button size="large" type="primary" @click="handleEdit(scope.row)">
                    编辑
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="pageSizes"
            :size="size"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
    </el-pagination>

    <el-dialog
            v-model="dialogEditVisible"
            title="修改业主数据"
            width="500"
            @close="handleClose">

        <el-form :model="owner" label-width="auto" style="max-width: 600px">
            <el-form-item label="姓名">
                <el-input v-model="owner.username" />
            </el-form-item>

            <el-form-item label="电话">
                <el-input v-model="owner.tel" />
            </el-form-item>
        </el-form>
        <!--
            el-upload  上传器
                action  图片提交的地址
                on-success  图片上传成功执行的函数
                       执行成功后 返回 图片url
                beforeAvatarUpload 上传前执行的操作
                       判断操作 格式和 大小
            img 图片上传后的回显示
        -->
        <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/upload/images"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取消</el-button>
                <el-button type="primary" @click="submitUpdateOwner">
                    修改数据
                </el-button>
            </div>
        </template>
    </el-dialog>

 </div>
    <script>
        const { createApp,ref,onMounted } = Vue
        const { ElMessage } = ElementPlus

        const app = createApp({
            setup(){
                let owners = ref([]);
                let dialogEditVisible = ref(false);

                let owner = ref({
                    id:"",
                    username:"",
                    tel:"",
                    img:""
                })

                let currentPage = ref(1);
                let pageSize = ref(2);
                let pageSizes = ref([2,3]);
                let total = ref(0);

                //sizeChange 发生的变化 触发的函数
                let handleSizeChange = (val)=>{
                    pageSizes.value = val;
                    initData()
                }

                //CurrentChange 发生的变化 触发的函数
                let handleCurrentChange = (val)=>{
                    currentPage.value = val;
                    initData()
                }

                //发送请求
                function initData(){
                    axios.get(`/owner/list/${currentPage.value}/${pageSize.value}`)
                        .then((data)=>{
                            console.log(data.data)
                            //服务器的数据给vue
                            // data.data 这个解析的事返回的 数据
                            // 返回的数据是 result 解析这个下面的data 所以需要2个data解析
                            owners.value = data.data.data.list;
                            total.value = data.data.data.total;
                        });
                }

                function handleEdit(obj){

                    //dialog
                    dialogEditVisible.value = true;

                    //回显
                    owner.value = JSON.parse(JSON.stringify(obj));
                    //修改的时候 进行回显
                    imageUrl.value = owner.value.img;

                }

                //回显的图片
                const imageUrl = ref('')

                const handleAvatarSuccess = (response, uploadFile) => {

                    console.log(response)
                    console.log(uploadFile)
                    //上传图片成功后 把 图片给 imageUrl 进行回显
                    //这里可以处理  把这个格式 blob:http://localhost:8080/b029d166-f58c-4375-8a64-cda8db982fa6
                    // 图片对象
                    // imageUrl.value = URL.createObjectURL(uploadFile.raw)
                    //这个返回的是图片地址   http://localhost:8080/b029d166-f58c-4375-8a64-cda8db982fa6.png
                    imageUrl.value = response

                    //把图片给对象
                    owner.value.img = imageUrl.value

                }

                const beforeAvatarUpload = (rawFile) => {
                    if (rawFile.size / 1024 / 1024 > 2) {
                        ElMessage.error('Avatar picture size can not exceed 2MB!')
                        return false
                    }
                    return true
                }

                function submitUpdateOwner(){
                    //提交的数据
                    axios({
                        method:"put",
                        url:"/owner",
                        data:owner.value
                    }).then(resp=>{
                        //关闭
                        dialogEditVisible.value = false;
                        //02 提示添加成功
                        ElMessage({
                            message: "操作成功",
                            type: 'success',
                        })
                        //03 加载数据
                        initData()
                    })

                }

                //这个函数是 页面初始化的时候  执行的钩子好函数
                //一般都是在这个函数中 加载数据 比如页面发请求 获取数据
                onMounted(()=>{
                    initData()
                })

                return {
                    owners,initData,handleEdit,dialogEditVisible,
                    submitUpdateOwner,owner,handleAvatarSuccess,beforeAvatarUpload,imageUrl,
                    currentPage,pageSize,pageSizes,total,handleCurrentChange,handleSizeChange

                }
            }
        });
        app.use(ElementPlus)

        //解决图标问题
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }

        app.mount('#app')

    </script>

</body>
</html>